{% extends 'base.html' %}
{% block head %}
    <script>

        function order_alert(msg, url) {

            $('.popup_con').fadeIn('fast', function () {
                $('.popup p').html(msg);
                setTimeout(function () {
                    $('.popup_con').fadeOut('fast', function () {

                        location.href = url;
                    });
                }, 2000)

            });

        }
        $(function () {

            //总商品金额,总商品个数
            var total_price = 0,
                total_goods = 0;
            $('.goods_list_td').each(function () {
                var price = parseFloat($(this).find('.col05').text()),
                    num = parseInt($(this).find('.col06').text());
                var unitprice = price * num;
                {#  将计算出的单元价格赋值#}
                $(this).find('.col07').text(unitprice.toFixed(2) + '元');

                total_price += price;
                total_goods += num;

            });

            //设置总单价,与商品总金额
            $('.total_goods_count').find('em').text(total_goods).end().find('b').text(total_price.toFixed(2) + '元');
            //设置加运费后总金额
            var total_add_yunfei = total_price + 10;
            $('.total_pay b').text(total_add_yunfei.toFixed(2) + '元');
            $('#total_pay_1').val(total_add_yunfei.toFixed(2));


            //提交订单 发现不能用回调函数,这很头疼
            {#            $("form").submit(function (e) {#}
            {#                if (e.isok) {#}
            {#                    order_alert('提交订单成功', '/');#}
            {##}
            {#                } else {#}
            {#                    order_alert('库存不足,请重新提交', '/cart/');#}
            {#                }#}
            {##}
            {#                //return false;  //阻止表单提交#}
            {#            });#}
            {#            $("#form1").ajaxForm();#}
            {#            $('form').ajaxform(function (data) {#}
            {#                if (data.isok) {#}
            {#                    order_alert('提交订单成功', '/');#}
            {#                }#}
            {#            })#}

            {#            $('form').submit();#}
            {#            $('form').submit(function () {#}
            {#                alert('a')#}
            {#            })#}



            {#            var options  = {#}
            {#                url:'/order/order_handle/',#}
            {#                type:'post',#}
            {#                success:function(data)#}
            {#                {    //成功执行的方法#}
            {#                    if(data.isok){#}
            {#                     order_alert('提交订单成功', '/');#}
            {#                    }else {#}
            {#                         order_alert('库存不足,请重新提交', '/cart/');#}
            {#                    }#}
            {#                }#}
            {#            };#}
            {#            $('form').ajaxform(options);#}
            {#            $(form.ajaxSubmit(options);   #}

            $('form').submit(function () {  //表单提交记住用id吧,不知道为啥用form的时候就不行了
                $.post("/order/order_handle/",
                    $(this).serialize(),  //序列化要提交的数据 就是含有name和value的input标签

                    function (data) {
                        if (data.isok) {
                            {#                            alert('ok')#}
                            order_alert('提交订单成功', '/user/order/');
                        } else {
                            {#                            alert('no')#}
                            order_alert('库存不足,请重新提交', '/cart/');
                        }
                    });


                return false;  //先阻止自动提交.
            })


        })

    </script>


{% endblock head %}


{% block body %}

    <form action="/order/order_handle/" method="post" >

        <h3 class="common_title">确认收货地址</h3>

        <div class="common_list_con clearfix">
            <dl>
                <dt>寄送到：</dt>

                {% for a in addrlist %}
                    <dd><input type="radio" name="addr" {% if forloop.counter == 1 %}
                               checked="" {% endif %} value="{{ a.addr }} {{ a.sjr }} (收)  {{ a.sjh }}">
                        {{ a.addr }} {{ a.sjr }} (收) {{ a.sjh }}</dd>
                {% endfor %}
            </dl>
            <a href="/user/center_site/" class="edit_site">编辑收货地址</a>

        </div>

        <h3 class="common_title">支付方式</h3>
        <div class="common_list_con clearfix">
            <div class="pay_style_con clearfix">
                <input type="radio" name="pay_style" checked>
                <label class="cash">货到付款</label>
                <input type="radio" name="pay_style">
                <label class="weixin">微信支付</label>
                <input type="radio" name="pay_style">
                <label class="zhifubao"></label>
                <input type="radio" name="pay_style">
                <label class="bank">银行卡支付</label>
            </div>
        </div>

        <h3 class="common_title">商品列表</h3>

        <div class="common_list_con clearfix">
            <ul class="goods_list_th clearfix">
                <li class="col01">商品名称</li>
                <li class="col02">商品单位</li>
                <li class="col03">商品价格</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
            </ul>

            {% for cart in cartlist %}
                <input type="text" name="cid" value="{{ cart.id }}" hidden>


                <ul class="goods_list_td clearfix">
                    <li class="col01">{{ forloop.counter }}</li>
                    <li class="col02"><img src="/static/media/{{ cart.goods.gpic }}"></li>
                    <li class="col03">{{ cart.goods.gtitle }}</li>
                    <li class="col04">{{ cart.goods.gunit }}</li>
                    <li class="col05">{{ cart.goods.gprice }}元</li>
                    <li class="col06">{{ cart.count }}</li>
                    <li class="col07"></li>
                </ul>


            {% endfor %}

        </div>

        <h3 class="common_title">总金额结算</h3>

        <div class="common_list_con clearfix">
            <div class="settle_con">
                <div class="total_goods_count">共<em></em>件商品，总金额<b></b></div>
                <div class="transit">运费：<b>10元</b></div>
                <div class="total_pay">实付款：<b></b></div>
                <input type="text" id="total_pay_1" name="total_pay" hidden>
            </div>
        </div>

        <div class="order_submit clearfix">
            {#            <a href="javascript:;" id="order_btn">提交订单</a>#}
            <input type="submit" id="order_btn" value="提交订单">
        </div>
    </form>


    <div class="popup_con">
        <div class="popup">
            <p></p>
        </div>

        <div class="mask"></div>
    </div>
    {#    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>#}
    {#    <script type="text/javascript">#}

    {#    </script>#}


{% endblock body %}